<template>
  <div class="app-container user">
    <SuspendBall :indent="true" needNearEdge @touchFunc="$router.push('/mindStation/aiCustomerService')" />
    <van-nav-bar title="心理科普" left-arrow @click-left="$router.push('/home')" />
    <div class="content">
      <div class="search-box">
        <el-input v-model="form.title" prefix-icon="el-icon-search" placeholder="请输入内容标题" @change="getData" />
      </div>
      <div class="banner-box">
        <img class="banner" :src="require('@/assets/images/mindStation/banner.png')">
        <!-- <div class="tip">心理服务热线 : 400-850-2525</div> -->
      </div>
      <div class="list-box column2" v-loading="dataLoading">
        <!-- <div class="list-title">心理科普</div> -->
        <div class="filter-box">
          <div class="type-box">
            <div class="type-item" :class="form.type == item.value && 'active'" v-for="(item, index) in typeList"
              :key="index" @click="handelTypeChange(item)">
              {{ item.label }}
            </div>
          </div>
        </div>
        <div class="list-content" v-if="listItemList.length">
          <el-scrollbar>
            <div class="list-item" v-for="(item, index) in listItemList" :key="index" @click="showVideoDialog(item)">
              <div class="item-cover">
                <svg-icon icon-class="play-fill" />
                <img class="cover-img" :src="item.cover">
                <!-- <div class="cover-tip" :class="item.videoPsychologyType">{{ videoPsychologyTypeObj[item.videoPsychologyType] }}</div> -->
              </div>
              <div class="item-label">{{ item.fileName }}</div>
            </div>
          </el-scrollbar>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
    </div>
    <!-- 视频弹窗 -->
    <VideoDialog :visible.sync="videoDialogVisible" :params="videoDialogParams" />
  </div>
</template>

<script>
import * as api from '@/api/mindStation/index.js';
import VideoDialog from '@/views/mindStation/components/VideoDialog.vue';
import { getVideoBase64 } from '@/utils/index.js';

export default {
  name: 'MindStationIndex',
  components: { VideoDialog },
  data() {
    return {
      dataLoading: false,
      form: { title: '', type: 1 },
      typeList: [
        { label: '心灵晴雨', value: 1 },
        { label: '失眠改善', value: 2 },
        { label: '焦虑改善', value: 3 },
        { label: '抑郁改善', value: 4 },
      ],
      listItemList: [],
      // videoPsychologyTypeObj: { 1: '心灵晴雨', 2: '失眠改善', 3: '焦虑改善', 4: '抑郁改善' },
      videoDialogVisible: false,
      videoDialogParams: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.dataLoading = true;
      api
        .videoList({ fileName: this.form.title, videoType: 2, videoPsychologyType: this.form.type })
        .then(async (res) => {
          await res.rows.reduce(async (pre, item) => {
            await pre;
            return getVideoBase64(item.filePath).then((res) => {
              item.cover = res;
            });
          }, Promise.resolve());
          this.listItemList = res.rows;
          this.dataLoading = false;
        });
    },
    handelTypeChange(item) {
      this.form.type = item.value;
      this.getData();
    },
    showVideoDialog(item) {
      this.videoDialogVisible = true;
      this.videoDialogParams = { src: item.filePath };
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content {
  width: calc(100% - 30px);
  height: calc(100% - 60px);
  margin: 0 15px;
  display: flex;
  flex-direction: column;

  .search-box {
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 10px;
  }

  .banner-box {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    margin-bottom: 10px;

    .banner {
      width: 100%;
    }

    .tip {
      position: absolute;
      top: 20px;
      width: 100%;
      text-align: center;
      color: #fff;
      text-shadow: 0px 4px 10px #f66b66;
    }
  }

  .filter-box {
    margin-bottom: 15px;
    display: flex;
    align-items: center;

    .type-box {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .type-item {
        padding: 2px 0;
        padding-bottom: 6px;
        color: #3d3d3d4c;

        &.active {
          border-bottom: 2px solid #165dff;
          color: #3d3d3d;
          font-weight: bold;
        }
      }
    }
  }

  @include list-box-style;

  .list-box {
    flex: 1;
    overflow: auto;
  }

  .empty {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
